/* Copyright 2018 Google Inc.
**
** Licensed under the Apache License, Version 2.0 (the “License”);
** you may not use this file except in compliance with the License.
** You may obtain a copy of the License at
** <https://apache.org/licenses/LICENSE-2.0>.
**
** Unless required by applicable law or agreed to in writing, software
** distributed under the License is distributed on an “AS IS” BASIS,
** WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
** See the License for the specific language governing permissions and
** limitations under the License.
*/

:root {
  color-scheme: dark light;
  /* Colors used in the V8 logos. */
  --blue: #4285F4;
  --darkgray: #464646;
  --lightgray: #A6A6A6;
  --white: #FFF;
  /* Derived colors. */
  --black: #000;
  --darkestgray: #232323;
  --nearwhite: #FEFEFE;
  --darkblue: #0A50C2;
  --lightestgray: #D6D6D6;
  --lightyellow: #FDEEB5;
  --yellow: #FAD956;
  --orange: #F8A602;

  /* Body padding offset. */
  --offset: 2em;

  /* Light mode */
  --html-color: var(--black);
  --html-background: var(--darkgray);
  --main-color: var(--black);
  --main-background: var(--white);
  --footer-background: var(--lightestgray);
  --main-and-footer-link-color: var(--darkblue);
  --avatar-img-filter: none;
  --icon-no-support-filter: grayscale(100%);
  --note-color: var(--main-color);
  --note-background: var(--lightyellow);
  --tag-color: var(--black);
  --tag-background: var(--lightestgray);
  --table-border: var(--lightestgray);
  --logo-hover-background: var(--lightestgray);
  --alt-table-row-background: #EEE;
}

:root.dark {
  --html-color: var(--nearwhite);
  --html-background: var(--black);
  --main-color:var(--nearwhite);
  --main-background: var(--darkestgray);
  --footer-color: var(--nearwhite);
  --footer-background: var(--darkgray);
  --main-and-footer-link-color: var(--yellow);
  --avatar-img-filter: grayscale(50%);
  --icon-no-support-filter: brightness(0.5) grayscale(100%);
  --note-color: var(--darkestgray);
  --note-background: var(--yellow);
  --tag-color: var(--nearwhite);
  --tag-background: var(--darkgray);
  --table-border: var(--lightgray);
  --logo-hover-background: var(--darkgray);
  --alt-table-row-background: #111;

  -webkit-font-smoothing: antialiased;
}

:root.dark figure img[src*=".png"]:not(.no-darkening),
:root.dark figure img[src*=".svg"]:not(.no-darkening) {
  filter: invert(0.862745) hue-rotate(180deg);
}

* {
  box-sizing: border-box;
}
html, body, fieldset, nav ul, nav ul li, h1, h2, h3 {
  list-style: none;
  margin: 0;
  padding: 0;
}
html {
  font: 16px/1.6 -apple-system,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Arial,sans-serif;
  color: var(--html-color);
  background: var(--html-background);
}
body {
  max-width: 928px;
  margin: 0 auto;
  padding: 0 1em;
}
#header {
  position: relative;
  height: 6.5em;
  background: var(--blue);
  padding: 0 1em;
}
#header nav ul, #header nav li {
  display: flex;
  justify-content: flex-end;
  align-content: center;
  align-items: center;
}
#header nav ul {
  position: absolute;
  bottom: 0;
  right: 1em;
}
#header h1 a {
  padding: 1em;
  font-size: 1rem;
  position: absolute;
  bottom: 0;
  background: url(/_img/v8-outline.svg) no-repeat center center;
  background-size: 80%;
  width: 6.5em;
  height: 6.5em;
  text-indent: -9999em;
  overflow: hidden;
}
#header nav a, #nav-toggle {
  padding: 1em;
  color: var(--black);
  font-weight: bold;
  background: rgba(255, 255, 255, .8);
  font-size: 1em;
  margin-right: 1em;
  display: block;
}
#nav-toggle {
  display: none;
}
#nav-toggle::after {
  background: url(/_img/v8-outline.svg) no-repeat center center;
  content: '';
  width: 2em;
  height: 2em;
  display: inline-block;
  padding-left: 0.5em;
  vertical-align: middle;
}
#header nav .current a {
  background: #FFF;
}
#header nav a:hover, #header nav a:focus {
  background-color: var(--darkgray);
  color: #FFF;
}
nav li:last-child a {
  margin-right: 0;
}
a {
  text-decoration: none;
}
#map {
  width: 100%;
  height: 600px;
}
main, #footer {
  background: var(--main-background);
  padding: 1em var(--offset);
}
article footer {
  overflow: hidden;
  background: var(--yellow);
}
article footer p {
  color: var(--black);
  margin: 0 0 1em;
}
article footer p:only-child {
  margin-bottom: 0;
}
article footer img {
  float: left;
  margin-right: 1em;
  filter: var(--avatar-img-filter);
}
hr {
  padding: 0;
  border: 0;
  border-top: 1px dotted var(--lightgray);
}
.footnotes {
  font-size: 0.8em;
}
.footnote-item:target {
  background: var(--lightyellow);
}
.retweet {
  display: inline-block;
  background: url(/_img/twitter.svg) no-repeat 0 0;
  padding-left: 1.75em;
  color: var(--darkgray);
  border-color: var(--darkgray);
  font-weight: bold;
}
.retweet:hover, .retweet:focus {
  color: var(--nearwhite);
  background-color: var(--darkgray);
  border-color: var(--darkgray);
}
#footer {
  color: var(--footer-color);
  background: var(--footer-background) url(/_img/v8-outline.svg) no-repeat 95.5% center;
  padding-right: 12em;
  background-size: 10em;
}
#footer div {
  padding-top: 1em;
  display: flex;
  align-items: flex-end;
}

pre, code, var, kbd, samp {
  font-family: Source Code Pro, Monaco, Lucida Console, monospace;
  font-size: 1em;
}
pre {
  background: #171717;
  color: #E6E1DC;
  white-space: pre;
  overflow: auto;
}
pre, article footer, .note {
  width: calc(100% + var(--offset) * 2);
  margin-left: calc(-1 * var(--offset));
  padding: 1em 1em 1em var(--offset);
}
ol, ul {
  padding-inline-start: var(--offset);
}
.ecmascript-algorithm ol > li > ol {
  list-style-type: lower-alpha;
}
.ecmascript-algorithm ol > li > ol > li > ol {
  list-style-type: lower-roman;
}
li pre {
  width: calc(100% + 3 * var(--offset));
  left: calc(-1 * var(--offset));
  position: relative;
}
code {
  padding: 1px 2px;
  tab-size: 2;
  background: rgba(0, 0, 0, 0.07);
  overflow-wrap: break-word;
  /* The below is still required for Safari */
  word-wrap: break-word;
}
pre code {
  border: 0;
  padding: 0;
  color: inherit;
  background: inherit;
}
mark, del, ins {
  padding: 0.2em;
}
pre mark {
  background-color: var(--lightgray);
}
pre del {
  background-color: red;
}
pre ins {
  background-color: green;
}
del {
  background: #FDD;
}
ins {
  background: #AFA;
}
ins, del:hover {
  text-decoration: none;
}
article footer a {
  color: var(--darkblue);
  border-bottom: 1px solid var(--darkblue);
}
article footer a:hover {
  color: var(--nearwhite);
  background-color: var(--darkblue);
}
main a, footer a {
  color: var(--main-and-footer-link-color);
  border-bottom: 1px solid var(--main-and-footer-link-color);
  padding: 2px 2px 1px 2px;
}
main a:hover, main a:focus, footer a:hover, footer a:focus {
  background-color: var(--main-and-footer-link-color);
  color: var(--main-background);
}
main a:hover code, main a:focus code {
  background-color: inherit;
}
.note a {
  color: var(--darkblue);
  border-bottom: 1px solid var(--darkblue);
}
.note a:hover, .note a:focus {
  color: var(--white);
  background-color: var(--darkblue);
}
.note pre {
  width: calc(100% + 1.5 * var(--offset));
}
a.bookmark {
  display: none;
}
h2:hover a.bookmark,
h3:hover a.bookmark,
h4:hover a.bookmark {
  display: inline;
}
figure {
  margin: 0 0 1em;
  padding: 0;
  text-align: center;
}
figure img {
  display: block;
  margin: 0 auto;
}
figure a {
  border-bottom: 0;
  padding: 0;
}
blockquote {
  border-left: 1em solid var(--lightestgray);
  margin-left: 0;
  padding-left: 1em;
}
.logo-download {
  display: block;
  border: 0;
}
.logo-download:hover,
.logo-download:focus {
  background: var(--logo-hover-background);
  color: var(--main-color);
}
.logo-download + h2 {
  margin-top: 1em;
}
figcaption {
  font-size: 0.9em;
}
iframe {
  border: 0;
}
iframe + h2, iframe + h3 {
  margin-top: 1em;
}
.table-wrapper {
  overflow-x: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1em;
}
thead th {
  background: var(--darkblue);
  color: #FFF;
}
th, td {
  border: 1px solid var(--table-border);
  padding: .5em 1em;
}
tbody tr:nth-child(odd) {
  background-color: var(--alt-table-row-background);
}
td > pre {
  margin: 0;
  width: 100%;
}
.td-with-just-pre {
  padding: 0;
}
.note {
  color: var(--note-color);
  background: var(--note-background);
  margin-bottom: 1em;
}
main nav {
  text-align: center;
  margin-bottom: 1em;
  overflow: hidden;
}
main nav a {
  font-weight: bold;
  padding: 0.5em;
  border-bottom: 0;
}
main .meta {
  font-size: 0.875em;
  margin-top: -0.2em;
}
.tag:not(.token) {
  border: 0;
  background: var(--tag-background);
  color: var(--tag-color);
}
img,
video {
  height: auto;
  max-width: 100%;
}
@supports (aspect-ratio: attr(width) / 1) {
  /* https://drafts.csswg.org/css-sizing-4/#example-2476aa5b */
  iframe {
    aspect-ratio: attr(width) / attr(height);
    max-width: 100%;
    height: auto;
  }
}
@supports not (aspect-ratio: attr(width) / 1) {
  /* https://alistapart.com/article/creating-intrinsic-ratios-for-video */
  .video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    margin-bottom: 0.5em;
    height: 0;
  }
  /* If we ever need other ratios, add them like so:
  .video-16\:9 {
    padding-bottom: 56.25%;
  }
  */
  .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
}

.language-grammar .production-name {
  font-style: italic;
}
.language-grammar .production-params,
.language-grammar .keyword {
  font-size: smaller;
  vertical-align: sub;
}
.language-grammar .production-params {
  padding-left: 2px;
}
.language-grammar .keyword {
  margin-left: -1ch;
}
.language-grammar .literal {
  font-weight: bold;
}

dark-mode-toggle {
  --dark-mode-toggle-light-icon: url(/_css/img/moon.svg);
  --dark-mode-toggle-dark-icon: url(/_css/img/sun.svg);
  --dark-mode-toggle-color: var(--main-and-footer-link-color);
  --dark-mode-toggle-icon-filter: invert(80%);
  margin-left: 1em;
  position: relative;
  top: 0.4rem;
}

@media (max-width: 770px) {
  :root {
    --offset: 10px;
  }
  body {
    padding: 0;
  }
  #footer {
    background-size: 5em;
    padding-right: 7em;
  }
  ol {
    padding-inline-start: calc(3 * var(--offset));
  }
  li pre {
    width: calc(100% + 4 * var(--offset));
    left: calc(-2 * var(--offset));
  }
  .note pre {
    width: calc(100% + 2.5 * var(--offset) + 1px);
  }
}

@media (max-width: 670px) {
  #header, .compact #header {
    height: auto;
    background: transparent;
    padding: 0;
  }
  #header h1 a {
    position: static;
    display: block;
  }
  #header nav ul {
    position: static;
  }
  #header nav ul, #header nav li {
    display: block;
  }
  #header nav a, #nav-toggle {
    margin-right: 0;
  }
  #header h1 a {
    display: none;
  }
  #header nav .current a {
    background: #333;
    color: #FFF;
  }
  .js #nav-toggle, .js #header nav.show {
    display: block;
  }
  .js #nav-toggle.hide, .js #header nav {
    display: none;
  }
  main nav a[rel="prev"], main nav a[rel="next"] {
    float: none;
    display: block;
    text-align: center;
  }
  #footer {
    background-image: none;
    padding-right: var(--offset);
  }
}

/* https://github.com/PrismJS/prism-themes/blob/master/themes/prism-cb.css
** with custom modifications for increased accessibility/contrast.
**/

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #999;
}

.token.selector,
.token.operator,
.token.punctuation {
  color: #FFF;
}

.token.namespace {
  opacity: .7;
}

.token.tag,
.token.boolean {
  color: var(--orange);
}

.token.atrule,
.token.attr-value,
.token.hex,
.token.string {
  color: #B0C975;
}

.token.property,
.token.entity,
.token.url,
.token.attr-name,
.token.keyword {
  color: #C27628;
}

pre mark .token.property,
pre mark .token.entity,
pre mark .token.url,
pre mark .token.attr-name,
pre mark .token.keyword,
pre mark .token.number,
pre mark .token.operator,
pre mark .token.punctuation {
  color: #333;
}

.token.function,
.token.constant {
  color: #E5A638;
}

.token.variable {
  color: #FDFBA8;
}

.token.number,
.token.regex {
  color: #FCC934;
}

.token.important,
.token.deliminator {
  color: #E45734;
}

.highlight-line {
  display: inline-block;
}
